<template>
  <view class="content" :style="[vuex_theme]">
    {{ $t("lang.intro") }}
    <view class="content-item" v-for="(item, index) in MAIN_PAGE_DATA" :key="index">
      <view class="content-item-title">{{ item.name }}</view>

      <view class="content-item-cont">
        <view
          class="content-item-col"
          hover-class="uv-hover-class"
          v-for="(chid, chidIndex) in item.children"
          :key="chidIndex"
          @click="chidClick(chid)"
        >
          <view class="content-item-wrap">
            <!-- 防止加载坍塌 -->
            <view class="content-item-wrap-image">
              <uv-image :src="chid.icon" width="40px" height="40px"></uv-image>
            </view>
            <view class="content-item-wrap-content uv-m-l-20">
              <view class="uv-font-28 content-item-wrap-title">{{ chid.name }}</view>
              <view class="content-item-wrap-desc uv-line-1 uv-font-24 uv-m-t-8">
                {{ chid.desc }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 返回顶部按钮作为配置按钮, 暂时作为开发时颜色配置问题处理 -->
    <uv-back-top
      :scroll-top="0"
      :top="-1"
      icon="setting"
      :customStyle="{ backgroundColor: vuex_theme['--theme-primary-color'], fontSize: '24rpx' }"
      :iconStyle="{ color: '#fff' }"
      @click="toSettingTheme"
    ></uv-back-top>
  </view>
</template>

<script>
import { MAIN_PAGE_DATA } from "./constant"
export default {
  data() {
    return {
      MAIN_PAGE_DATA: MAIN_PAGE_DATA ? MAIN_PAGE_DATA : [{}]
    }
  },
  methods: {
    toSettingTheme() {
      uni.$uv.route({ url: "/subpages/settings/theme/theme" })
    },
    chidClick({ path, params }) {
      uni.$uv.route({ url: path, params: params })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: $uv-bg-color;
}
.content {
  padding: 0 25rpx;
  &-item {
    margin-bottom: 20rpx;

    &-title {
      font-size: 30rpx;
      font-weight: 600;
      margin: 20rpx 0;
      padding: 0 20rpx;
      border-left: 3px solid $uv-primary;
      color: $uv-content-color;
    }

    &-cont {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      margin-left: -7.5px;
      margin-right: -7.5px;
    }
    &-col {
      padding-left: 7.5px;
      padding-right: 7.5px;
      align-items: stretch;
      justify-content: flex-start;
      flex: 0 0 50%;
      margin-left: 0%;
      width: 50%;
      box-sizing: border-box;
    }

    &-wrap {
      padding: 30rpx 20rpx;
      background-color: #fff;
      border-radius: 8rpx;
      margin-bottom: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-shadow: 0 0px 20px 0px rgba(0, 0, 0, 0.05);

      &-image {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
      }
      &-content {
        flex: 1;
      }
      &-desc {
        color: $uv-tips-color;
      }
    }
  }
}
</style>
